import Dialog from ".";
import { Row, Col,Spin } from 'antd';
import { WeaTab, WeaSelect, WeaCheckbox, WeaLocaleProvider } from 'ecCom';
import { observer } from "mobx-react";
import { READONLY, EDIT, REQUIRE } from '../../constants/path';
const getLabel = WeaLocaleProvider.getLabel;
import { toJS } from 'mobx'

import './filedPropDialog.less';
@observer
export default class FiledPropDialog extends React.Component {
    render() {
        const { store } = this.props;
        const { form, readonly, allCheckList, allCheckValues, setAllCheckValues,loading,searchValue } = store;
        let allCheckListLabel = [{
            key: EDIT,
            showname: getLabel('508644','是否编辑'),
        }, {
            key: REQUIRE,
            showname: getLabel('513341','是否必填'),
        },
        {
            key: READONLY,
            showname: getLabel('508646','是否只读'),
        }];

        
        return (
            <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@lbesgs`}
            dialog={store}
            className="edc-filedProp-set-dialog"
            >
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@olhyr1`} spining={loading}>
                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@qiyzsy`}
                    searchType={['base']}
                    searchsBaseValue={searchValue}
                    onSearch={store.onSearch}
                    datas={store.forms.slice()}
                    keyParam="formid"
                    selectedKey={store.selectedForm}
                    onChange={store.changeSelectedForm}
                />
                {
                    store.forms.map((f, i) => {
                        if (!form.has(f.formid)) {
                            return null;
                        }
                        const formField = form.$(f.formid);
                        const { tables = [] } = f;
                        //const dtdiff = `edc_uf_table${f.formid}_dt`;
                        const dtdiff = `${f.mainTableName}_dt`;
                        let hasMain = false;
                        formField.map(r => {
                            if(!r.key.startsWith(dtdiff)) {
                                hasMain = true
                            }
                        }).length;
                        const detailTabs = tables.map(d => ({
                            key: d.detailTable,
                            //title: `${getLabel('502710', '明细') + d.detailTable.replace(dtdiff, '')}`
                            //title: `${getLabel('502710', '明细') + d.detailTable.substr(d.detailTable.length-1,1)}`
                            title: `${getLabel('502710', '明细') + d.detailTable.substr(d.detailTable.indexOf("_dt")+3)}`
                        }));

                        return (
                            <ul className="edc-filedProp-set" style={{ display: store.selectedForm === f.formid ? 'block' : 'none' }}>
                                { hasMain && <li>
                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@v56hzv@${i}`}>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5l8tr9@${i}`} span={8}>
                                            {getLabel('502711', '字段')}
                                        </Col>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@d4ceuy@${i}`} span={16}>
                                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@757grk@${i}`}
                                                viewAttr={readonly ? 1 : 2}
                                                style={{ width: 400 }}
                                                onChange={(v) => store.allCheckChange(v, f.formid)}
                                                detailtype={3}
                                                //{...allCheckList.bind()}
                                                //value={allCheckValues[`edc_uf_table${f.formid}`]}
                                                value={allCheckValues[f.mainTableName]}
                                                options={allCheckListLabel}
                                            />
                                        </Col>
                                    </Row>
                                </li>}
                                {
                                    formField.map((field, index) => {
                                        if (field.key.startsWith(dtdiff)) {
                                            return null;
                                        }
                                        const { onChange, ...others } = field.bind();
                                        return (
                                            <li>
                                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@3166tv@${index}`}>
                                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4hnzyr@${index}`} span={8}>
                                                        <span dangerouslySetInnerHTML={{ __html: field.label }}></span>
                                                    </Col>
                                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8sbc84@${index}`} span={16}>
                                                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@f2k4f0@${index}`}
                                                            {...others}
                                                            className={'edc-filedProp-radio'}
                                                            viewAttr={readonly ? 1 : 2}
                                                            style={{ width: 400 }}
                                                            detailtype={3}
                                                            options={field.get('options')}
                                                            onChange={(v) => {
                                                                onChange(v);
                                                                setAllCheckValues();
                                                            }}
                                                        />
                                                    </Col>
                                                </Row>
                                            </li>
                                        )
                                    })
                                }
                                {
                                    tables.length > 0 && <li className="sub-table">
                                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@1opck2@${i}`}
                                            datas={detailTabs}
                                            keyParam="key"
                                            type="card"
                                            selectedKey={store.selectedDetail}
                                            onChange={store.changeSelectedDetail}
                                        />
                                        {tables.map((table, index) => {
                                            if (!formField.has(table.detailTable)) {
                                                return null;
                                            }
                                            const detailField = formField.$(table.detailTable);
                                            //const { value } = detailField.$('combineType').bind();
                                            return (
                                                <div>

                                                    <ul style={{ display: store.selectedDetail == table.detailTable ? 'block' : 'none' }}>
                                                        <li>
                                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@trknl8@${index}`}>
                                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@w787em@${index}`} span={8}>
                                                                    {getLabel('502711', '字段')}
                                                                </Col>
                                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cs6pk6@${index}`} span={16}>
                                                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@lauv9g@${index}`}
                                                                        viewAttr={readonly ? 1 : 2}
                                                                        onChange={(v) => store.allCheckChange(v, f.formid, table.detailTable)}
                                                                        style={{ width: 400 }}
                                                                        detailtype={3}
                                                                        value={allCheckValues[table.detailTable]}
                                                                        options={allCheckListLabel} 
                                                                    />
                                                                </Col>
                                                            </Row>
                                                        </li>
                                                        {detailField.map((field, index) => {
                                                            const { onChange, ...others } = field.bind();
                                                            return (
                                                                <li>
                                                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@a4jf1f@${index}`}>
                                                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@txrvhn@${index}`} span={8}>
                                                                            <span dangerouslySetInnerHTML={{ __html: field.label }}></span>
                                                                        </Col>
                                                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3dsnce@${index}`} span={16}>
                                                                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@t13udc@${index}`}
                                                                                className={'edc-filedProp-radio'}
                                                                                detailtype={3}
                                                                                viewAttr={readonly ? 1 : 2}
                                                                                style={{ width: 400 }}
                                                                                widthMatchOptions={true}
                                                                                {...others}
                                                                                options={field.get('options')}
                                                                                onChange={(v) => {
                                                                                    onChange(v);
                                                                                    setAllCheckValues();
                                                                                }}
                                                                            />
                                                                        </Col>
                                                                    </Row>
                                                                </li>
                                                            )
                                                        })}
                                                    </ul>
                                                </div>
                                            )

                                        })}
                                    </li>
                                }
                            </ul>
                        )
                    })
                }
                </Spin>
            </Dialog>
        )
    }

}